<!-- <template>
	<view class="content">
		<image class="logo" src="/static/logo.png"></image>
		<view class="text-area">
			<text class="title">{{title}}</text>
		</view>
	</view>
</template> -->
<template>
  <view class="container">
    <button @click="startScreenCapture">开始</button>
    <button @click="stopScreenCapture">结束</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      timer: null, // 定时器
      isCapturing: false, // 是否正在截屏
    };
  },
  methods: {
    startScreenCapture() {
      if (this.isCapturing) {
        uni.showToast({
          title: '已经在截屏中',
          icon: 'none',
        });
        return;
      }
      this.isCapturing = true;
      this.timer = setInterval(this.captureAndUpload, 30000); // 每30秒调用一次
    },
    stopScreenCapture() {
      if (!this.isCapturing) {
        uni.showToast({
          title: '未在截屏中',
          icon: 'none',
        });
        return;
      }
      this.isCapturing = false;
      clearInterval(this.timer); // 清除定时器
      uni.showToast({
        title: '已停止截屏',
        icon: 'success',
      });
    },
    async captureAndUpload() {
      try {
		    console.log('开始截屏');
		  uni.showToast({
		    title: `开始截屏`,
		    icon: 'success',
		  });
        // 模拟截屏，这里需要根据实际需求调整
        const screenshot = await this.takeScreenshot();

        // 上传图片
        const uploadResult = await this.uploadImage(screenshot);
        uni.showToast({
          title: `上传成功，图片地址：${uploadResult.data.url}`,
          icon: 'success',
        });
      } catch (error) {
        console.error('截屏或上传失败', error);
        uni.showToast({
          title: '截屏或上传失败',
          icon: 'none',
        });
      }
    },
    async takeScreenshot() {
      // 使用canvas或其他方式截屏，这里只是一个示例
      // 实际开发中需要根据uniapp的环境和需求来实现
      return new Promise((resolve, reject) => {
        const canvas = uni.createCanvasContext('screenshotCanvas', this);
        canvas.setFillStyle('#ffffff');
        canvas.fillRect(0, 0, 300, 300); // 填充一个白色矩形
        canvas.draw(false, () => {
          uni.canvasToTempFilePath({
            canvasId: 'screenshotCanvas',
            success: (res) => {
              resolve(res.tempFilePath); // 返回临时文件路径
            },
            fail: (err) => {
              reject(err);
            },
          });
        });
      });
    },
    async uploadImage(filePath) {
      return new Promise((resolve, reject) => {
        uni.uploadFile({
          url: 'https://img.he4966.cn/api/common/upload', // 上传接口
          filePath: filePath,
          name: 'file', // 后端接收的字段名
          formData: {
            // 如果接口需要额外的表单数据，可以在这里添加
          },
          success: (uploadRes) => {
            resolve(JSON.parse(uploadRes.data));
          },
          fail: (err) => {
            reject(err);
          },
        });
      });
    },
  },
};
</script>

<style>
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
}
button {
  margin: 10px;
}
</style>